<template>
    <div>
      <el-form :model="formData" ref="formData" :rules="formRules" label-position="top" class="form-data">

        <el-form-item label="资讯名称:" prop="title">
          <el-input v-model="formData.title" placeholder="请输入"/>
        </el-form-item>

        <el-form-item label="资讯来源:" prop="authorName">
          <el-input v-model="formData.authorName" placeholder="请输入"/>
        </el-form-item>

        <el-form-item label="资讯类型:" prop="type">
          <el-select v-model="formData.type" placeholder="请选择" style="width: 100%">
            <el-option :label="item.name" :value="item.code" v-for="(item, index) in resourceList" :key="index"/>
          </el-select>
        </el-form-item>
        <el-form-item label="封面图片" prop="indexImage">
          <div class="image-view" v-if="formData.coverPicture">
            <el-image :src="formData.coverPicture" fit="cover" style="width: 100%; height: 100%"></el-image>
            <i class="el-icon-circle-close" @click="formData.coverPicture = null"></i>
          </div>
          <UploadFile v-model="formData.coverPicture" v-else style="width: 100%"/>
        </el-form-item>

        <el-form-item label="资讯内容:" prop="content">
          <Tinymce v-model="formData.content" :height="400"></Tinymce>
        </el-form-item>

        <el-form-item class="form-button">
          <el-button class="but-view" @click="drawerClose">取 消</el-button>
          <el-button class="but-view" type="primary" @click="onSubmit">提 交</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
  import Tinymce from '@/components/Tinymce'
  export default {
    props: {
      entity: Object,
      status: String
    },
    components: {
      Tinymce
    },
    name: 'InformationForm',
    data () {
      return {
        resourceList: [],
        formData: {
          title: null, authorName: null,
          type: null,
          content: null,
        },
        formRules: {
          title: [
            { required: true, message: '请输入资讯名称', trigger: 'blur' }
          ],
          authorName: [
            { required: true, message: '请输入资讯来源', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择资讯类型', trigger: 'change' }
          ],
          content: [
            { required: true, message: '请输入资讯内容', trigger: 'blur' }
          ]
        },
      }
    },
    beforeMount() {
      this.getResourceList()
      if (this.entity) this.getDetails()
    },
    methods: {
      async onSubmit() {
        this.$refs.formData.validate(async(valid) => {
          if (!valid) return this.$message.warning('请完善信息')
          const url = this.entity && this.entity.id ? '/wx/information/update' : '/wx/information/backstage/add'
          await this.$ajax.post(url, this.formData)
          this.$message.success('操作成功!')
          this.$emit('refresh')
          this.drawerClose()
        })
      },
      /**
       * 获取详情
       */
      async getDetails() {
        const res = await this.$ajax.get(`/wx/information/backstage/info?id=${this.entity.id || ''}`)
        this.formData = res.data
      },
      drawerClose() {
        this.$emit('close')
      },
      async getResourceList() {
        const res = await this.$ajax.get('/resource/table/list?type=zixun')
        this.resourceList = res.rows
      },
    }
  }
</script>

<style scoped lang="scss">
  .image-view {
    width: 100%;
    height: 178px;
    position: relative;
    .el-icon-circle-close {
      font-size: 30px;
      color: red;
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 100;
    }
    .el-icon-circle-close:hover {
      cursor: pointer;
    }
  }
</style>
